<template>
  <div class="class-list-container" v-loading="isLoading">
    <el-page-header @back="goBack" :content="pageTitle"></el-page-header>
    <el-divider></el-divider>

    <!-- 学生视图: 加入班级 -->
    <div v-if="!isTeacher && !isAdmin" class="join-class-section">
       <el-card shadow="never">
         <template #header>
           <div class="card-header">
             <span>加入新班级</span>
           </div>
         </template>
         <el-form @submit.prevent="handleJoinClass" inline>
           <el-form-item label="邀请码">
             <el-input v-model="inviteCodeInput" placeholder="请输入班级邀请码"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" native-type="submit" :loading="isJoining">加入班级</el-button>
           </el-form-item>
         </el-form>
       </el-card>
       <el-divider></el-divider>
       <h3>我加入的班级</h3>
    </div>

     <!-- 教师视图: 创建班级按钮 -->
    <div v-if="isTeacher" class="teacher-actions">
        <el-button type="primary" @click="goToCreateClass">创建新班级</el-button>
        <el-divider></el-divider>
        <h3>我管理的班级</h3>
    </div>

    <!-- 管理员视图: 提示 -->
    <div v-if="isAdmin">
        <h3>所有班级</h3>
        <el-alert title="管理员可以查看所有班级信息，但管理操作（如编辑、删除、管理学生）需由班级创建教师进行。" type="info" show-icon :closable="false"></el-alert>
        <el-divider></el-divider>
    </div>


    <!-- 班级列表展示 -->
    <el-row :gutter="20" v-if="classes.length > 0">
      <el-col :span="8" v-for="cls in classes" :key="cls.id" style="margin-bottom: 20px;">
        <el-card shadow="hover" class="class-card">
          <template #header>
            <div class="card-header">
              <span>{{ cls.name }}</span>
              <el-button type="primary" link @click="goToClassDetail(cls.id)">查看详情</el-button>
            </div>
          </template>
          <div>
             <p><strong>课程:</strong> {{ cls.course || '未指定' }}</p>
             <p><strong>年级:</strong> {{ cls.grade || '未指定' }}</p>
             <p><strong>描述:</strong> {{ cls.description || '无' }}</p>
             <p><strong>状态:</strong> 
               <el-tag :type="getClassStatus(cls.startDate, cls.endDate).type" size="small">
                 {{ getClassStatus(cls.startDate, cls.endDate).text }}
               </el-tag>
             </p>
             <p><strong>起止日期:</strong> {{ formatDate(cls.startDate) }} - {{ formatDate(cls.endDate) }}</p>
             <!-- 可以在这里添加更多信息 -->
          </div>
        </el-card>
      </el-col>
    </el-row>
     <el-empty v-else description="暂无班级数据"></el-empty>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { formatDate, getClassStatus } from '@/utils/formatters'; // 导入工具函数

const store = useStore();
const router = useRouter();

// 从 Vuex Store 获取状态和 Getters
const isLoading = computed(() => store.state.class.isLoading); // 使用模块的 loading
const isJoining = ref(false); // 单独的加入操作 loading
const classes = computed(() => store.getters['class/getClassList']); // 使用命名空间访问 getter
const isTeacher = computed(() => store.getters.isTeacher);
const isAdmin = computed(() => store.getters.isAdmin);

const inviteCodeInput = ref('');

// 页面标题
const pageTitle = computed(() => {
    if (isAdmin.value) return '所有班级';
    if (isTeacher.value) return '我的班级管理';
    return '我的班级';
});

// 获取班级列表
const fetchClasses = async () => {
  await store.dispatch('class/fetchClassList'); // 使用命名空间访问 action
};

// 处理加入班级
const handleJoinClass = async () => {
  if (!inviteCodeInput.value) {
    ElMessage.warning('请输入邀请码');
    return;
  }
  isJoining.value = true;
  await store.dispatch('class/joinClassByCode', inviteCodeInput.value); // 使用命名空间访问 action
  isJoining.value = false;
  inviteCodeInput.value = ''; // 清空输入框
};

// 跳转到创建班级页面
const goToCreateClass = () => {
  router.push({ name: 'ClassCreate' });
};

// 跳转到班级详情页面
const goToClassDetail = (id) => {
  router.push({ name: 'ClassDetail', params: { id } });
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 组件挂载时获取数据
onMounted(() => {
  fetchClasses();
});
</script>

<style scoped>
.class-list-container {
  padding: 20px;
}
.join-class-section .el-card {
    margin-bottom: 20px;
}
.teacher-actions {
    margin-bottom: 20px;
}
.class-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.class-card p {
    margin-bottom: 8px;
    font-size: 14px;
    color: #606266;
}
.class-card p strong {
    color: #303133;
    margin-right: 5px;
}
.el-page-header {
    margin-bottom: 20px;
}
.el-divider {
    margin: 20px 0;
}
</style> 